const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

  devServer: {
    port: 3000 // 端口号
  },

  // todo    入口      默认入口: ./src/index.js
  entry: './src/main.js',
  // todo    出口     默认出口: ./dist/main.js
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js',
  },

  // todo   自动生成 html 插件
  plugins: [new HtmlWebpackPlugin({
    // 表示以 public/index.html 这个页面作为模板去创建 html 文件，打包到 dist/index.html 
     template: './public/index.html'
  })],

  plugins: [new MiniCssExtractPlugin({
    template: './public/index.html'
  })],

  // todo    打包模式
  // mode: 'development',  // 开发模式     不会压缩混淆，注释都在
  mode: 'production',      //生产模式   需要上线的 打包的代码进行压缩 混淆(多余的换行注释去掉)

  //todo     webpack 默认识别打包 js文件、 json文件， 其他类型的文件不识别
  module: {
    rules: [
      {    //定义 css 规则
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {    //定义 less 规则
        test: /\.less$/,
        // 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
          use: [ "style-loader", "css-loader", 'less-loader']
      },
      {   //  图片
        test: /\.(png|jpg|gif|jpeg)$/i,
        type: 'asset'
     },
     {   // 字体图标
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      type: 'asset/resource',
      generator: {
        filename: 'font/[name].[hash:6][ext]'
      }
    },
    {
      // babel 降级
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env'] 
          }
      }
    },
    {
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    },  
   ],
    
  },
};